<template>
  <div>
    <el-select v-model.trim="queryParams" placeholder="请选择">
      <el-option label="房间号" :value="1"> </el-option>
      <el-option label="订单号" :value="2"> </el-option>
    </el-select>
    <el-input
      style="width: 20vw"
      placeholder="请输入要查询的内容"
      v-model="query"
      clearable
    >
    </el-input>
    <el-button type="primary" @click="qeuryParamsNum">查询</el-button>
    <el-select
      v-model="queryStatusParams"
      placeholder="请选择"
      style="margin-left: 150px"
    >
      <el-option label="已预定" :value="1"> </el-option>
      <el-option label="已入住" :value="2"> </el-option>
      <el-option label="已退房" :value="3"> </el-option>
      <el-option label="已完成" :value="4"> </el-option>
    </el-select>
    <el-button type="primary" @click="queryParamsStatus">查询</el-button>
    <el-table
      :data="orderData"
      height="564"
      border
      style="width: 100%"
      :row-style="{ height: '52.5px' }"
    >
      <el-table-column
        prop="billTime"
        label="创建时间"
        width="160"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="billNumber"
        label="订单号"
        width="120"
        align="center"
      >
      </el-table-column>
      <el-table-column prop="uname" label="姓名" width="120" align="center">
      </el-table-column>
      <el-table-column
        prop="checkInTime"
        label="入住时间"
        width="140"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="checkOutTime"
        label="退房时间"
        width="140"
        align="center"
      >
      </el-table-column>
      <el-table-column prop="idCard" label="身份证" width="150" align="center">
      </el-table-column>
      <el-table-column prop="phone" label="手机号" width="120" align="center">
      </el-table-column>
      <el-table-column prop="price" label="价格" width="120" align="center">
      </el-table-column>
      <el-table-column
        prop="status"
        label="状态"
        width="120"
        align="center"
        fixed="right"
      >
        <!-- {{statusName}} -->
        <template #default="{ row }">
          <div>
            <p>{{ row.statusMsg }}</p>
          </div>
        </template>
      </el-table-column>
      <el-table-column fixed="right" align="center" label="操作">
        <template #default="{ row }">
          <div>
            <a href="#" @click="Queryroom(row)">{{ row.buttonMsg }}</a>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
      title="房间号"
      :visible.sync="dialogVisibles"
      width="30%"
      :before-close="handleCloses"
    >
      <template #default="{ row }">
        <div style="display: flex; margin-left: 25%">
          <el-select
            v-model="roomNumSelect"
            clearable
            placeholder="请选择房间"
            @change="roomChange(row)"
          >
            <el-option
              v-for="item in roomNum"
              :key="item.id"
              :label="item.number"
              :value="item.id"
            >
            </el-option>
          </el-select>
          <el-button type="primary" @click="confirmSelect">确定</el-button>
        </div>
      </template>
    </el-dialog>
    <div class="pagination">
      <pagination :total="companiesCount" @transfer="CurrentChange">
      </pagination>
    </div>
  </div>
</template>
<script>
import {
  getOrderAPI,
  getFindRoomAPI,
  getCheckInAPI
} from '@/api/getOrderAPI.js'
import request from '@/untils/request'
import pagination from '@/components/pagination/MyPagination.vue'
export default {
  data() {
    return {
      // 每页的数据数量
      companiesCount: 10,
      queryStatusParams: '',
      queryParams: '',
      roomNumSelect: '',
      dialogVisibles: false,
      roomNum: [],
      query: '',
      orderData: [],
      params: {
        page: 1,
        size: 10
      },
      roomStatus: 0,
      confirmSelects: '',
      roomId: '',
      identification: ''
    }
  },
  methods: {
    // 分页跳转
    CurrentChange(currentPage) {
      // 把当前页码给当前页面
      this.params.page = currentPage

      if (this.identification === 1) {
        this.qeuryParamsNum()
      } else if (this.identification === 2) {
        this.qeuryParamsNum()
      } else if (this.identification === 3) {
        this.queryParamsStatus()
      } else if (this.identification === 4) {
        this.queryParamsStatus()
      } else if (this.identification === 5) {
        this.queryParamsStatus()
      } else if (this.identification === 6) {
        this.queryParamsStatus()
      } else if (this.identification === 7) {
        this.getOrder()
      }
    },
    // 关闭对话框
    handleCloses(done) {
      this.$confirm('确认关闭？')
        .then((_) => {
          done()
        })
        .catch((_) => {})
    },
    // 点击确定左边的查询
    async qeuryParamsNum() {
      if (this.query === '') {
        return this.$message({
          showClose: true,
          message: '请输入要查询的内容',
          type: 'warning'
        })
      }
      if (this.queryParams === 1) {
        const { data: res } = await getOrderAPI({
          page: this.params.page,
          size: this.params.size,
          publisherId: localStorage.getItem('id'),
          roomNum: this.query
        })
        if (res.totalElements === 0) {
          this.$message({
            showClose: true,
            message: res.msg,
            type: 'warning'
          })
          this.query = ''
        } else {
          this.$message({
            showClose: true,
            message: res.msg,
            type: 'success'
          })
          this.orderData = res.data.bills
          this.companiesCount = res.data.totalElements
          this.identification = 1
        }
      } else if (this.queryParams === 2) {
        const { data: res } = await request.get(`/bill/findOne/${this.query}`)
        if (res.code === 20041) {
          this.$message({
            showClose: true,
            message: res.msg,
            type: 'success'
          })
          this.orderData = res.data.bills
          this.companiesCount = res.data.totalElements
          this.identification = 2
        } else {
          this.$message({
            showClose: true,
            message: res.msg,
            type: 'warning'
          })
          this.query = ''
        }
      }
    },
    // 点击右边的确认按钮
    async queryParamsStatus() {
      if (this.queryStatusParams === '') {
        return this.$message({
          showClose: true,
          message: '请选择要查询的房间状态',
          type: 'warning'
        })
      }
      if (this.queryStatusParams === 1) {
        const { data: res } = await getOrderAPI({
          page: this.params.page,
          size: this.params.size,
          publisherId: localStorage.getItem('id'),
          status: this.queryStatusParams
        })
        if (res.data.totalElements === 0) {
          this.$message({
            showClose: true,
            message: '查询失败',
            type: 'warning'
          })
        } else {
          this.$message({
            showClose: true,
            message: res.msg,
            type: 'success'
          })
          this.orderData = res.data.bills
          this.companiesCount = res.data.totalElements
          this.identification = 3
          this.queryStatusParams = ''
        }
      } else if (this.queryStatusParams === 2) {
        const { data: res } = await getOrderAPI({
          page: this.params.page,
          size: this.params.size,
          publisherId: localStorage.getItem('id'),
          status: this.queryStatusParams
        })
        if (res.data.totalElements === 0) {
          this.$message({
            showClose: true,
            message: '查询失败',
            type: 'warning'
          })
        } else {
          this.$message({
            showClose: true,
            message: res.msg,
            type: 'success'
          })
          this.orderData = res.data.bills
          this.companiesCount = res.data.totalElements
          this.identification = 4
          this.queryStatusParams = ''
        }
      } else if (this.queryStatusParams === 3) {
        const { data: res } = await getOrderAPI({
          page: this.params.page,
          size: this.params.size,
          publisherId: localStorage.getItem('id'),
          status: this.queryStatusParams
        })
        if (res.data.totalElements === 0) {
          this.$message({
            showClose: true,
            message: '查询失败',
            type: 'warning'
          })
        } else {
          this.$message({
            showClose: true,
            message: res.msg,
            type: 'success'
          })
          this.orderData = res.data.bills
          this.companiesCount = res.data.totalElements
          this.identification = 5
          this.queryStatusParams = ''
        }
      } else if (this.queryStatusParams === 4) {
        const { data: res } = await getOrderAPI({
          page: this.params.page,
          size: this.params.size,
          publisherId: localStorage.getItem('id'),
          status: this.queryStatusParams
        })
        if (res.data.totalElements === 0) {
          this.$message({
            showClose: true,
            message: '查询失败',
            type: 'warning'
          })
        } else {
          this.$message({
            showClose: true,
            message: res.msg,
            type: 'success'
          })
          this.orderData = res.data.bills
          this.companiesCount = res.data.totalElements
          this.identification = 6
          this.queryStatusParams = ''
        }
      }
    },
    // 下拉框选择房间号,获取某个房间号id
    roomChange() {
      this.roomId = this.roomNumSelect
    },
    // 获取当前房东的订单
    async getOrder() {
      let id = localStorage.getItem('id')
      const { data: res } = await getOrderAPI({
        page: this.params.page,
        size: this.params.size,
        publisherId: Number(id)
      })
      if (res.code === 20041) {
        this.identification = 7
        this.companiesCount = res.data.totalElements
        this.orderData = res.data.bills
      }
    },
    // 确定选择
    async confirmSelect() {
      if (this.confirmSelects.status === 1) {
        if (this.roomNumSelect === '') return
        this.confirmSelects.status = 2
      }
      const { data: res } = await getCheckInAPI({
        id: this.confirmSelects.id,
        status: this.confirmSelects.status,
        roomId: this.roomNumSelect
      })
      if (res.code === 20031) {
        this.$message({
          showClose: true,
          message: res.msg,
          type: 'success'
        })
        this.getOrder()
        this.roomNumSelect = ''
        this.dialogVisibles = false
      } else {
        this.$message({
          showClose: true,
          message: '操作失败',
          type: 'success'
        })
      }
    },
    // 点击选择
    async Queryroom(row) {
      this.confirmSelects = row
      if (this.confirmSelects.status === 1) {
        const { data: res } = await getFindRoomAPI({
          page: this.params.page,
          size: this.params.size,
          roomStatus: this.roomStatus,
          houseId: row.houseId
        })
        this.roomNum = res.data.rooms
        this.dialogVisibles = true
      } else if (this.confirmSelects.status === 2) {
        this.confirmSelects.status = 3
        const { data: result } = await getCheckInAPI({
          id: this.confirmSelects.id,
          status: this.confirmSelects.status
        })
        if (result.code === 20031) {
          this.$message({
            showClose: true,
            message: '已退房',
            type: 'success'
          })
          this.getOrder()
        }
      } else if (this.confirmSelects.status === 3) {
        this.confirmSelects.status = 4
        const { data: result } = await getCheckInAPI({
          id: this.confirmSelects.id,
          status: this.confirmSelects.status,
          roomId: row.roomId
        })
        if (result.code === 20031) {
          this.$message({
            showClose: true,
            message: '已完成',
            type: 'success'
          })
          this.getOrder()
        }
      }
    }
  },
  created() {
    this.getOrder()
  },
  components: { pagination }
}
</script>
<style scoped>
.pagination {
  text-align: center;
}
</style>
